<template>
  <div style="width: 70%;height: 6vh;line-height: 6vh;font-weight: bold;">金融助力</div>
  <div style="width: 70%;height: 50vh;background-color: white;">
        <div style="width: 100%;height: 13vh;">
            <div style="width: 40%;height: 100%;margin: auto;text-align: center;display: flex;">
                <div class="share-help1">
                    <img src="/imgs/share1.jpg" alt="" style="width: 5vh;height: 5vh;">
                    <span>高效、便捷</span>
                </div>
                <div class="share-help1">
                    <img src="/imgs/share2.jpg" alt="" style="width: 40px;height: 40px;">
                    <span>专业、安全</span>
                </div>
            </div>
        </div>
        <div class="share-help2" style="width: 100%;height: 32vh;">
            <ul style="padding: 0;margin: 0;">
                <li>
                    <div class="share-help2-img">
                    <img src="/imgs/share3.jpg" alt=""></div>
                    <div class="share-help2-content">
                        <div style="margin-top: 2vh;">
                        <p>解决资金短缺</p>
                        <p>提供更多保障</p>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="share-help2-img">
                    <img src="/imgs/share4.jpg" alt=""></div>
                    <div class="share-help2-content">
                        <div style="margin-top: 2vh;">
                        <p>为用户和供应商提供</p>
                        <p>担保服务、</p>
                        <p>履行担保、</p>
                        <p>质量担保等</p>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="share-help2-img">
                    <img src="/imgs/share5.jpg" alt=""></div>
                    <div class="share-help2-content">
                        <div style="margin-top: 2vh;">
                        <p>各种类型保险服务，</p>
                        <p>财产保险、</p>
                        <p>建筑一切险、</p>
                        <p>意外伤害保险等</p>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
  </div>
  <div style="width: 70%;height: 6vh;line-height: 6vh;font-weight: bold;">合作银行</div>
  <div style="width: 70%;height: 24vh;background-color: white;display: flex;margin-bottom: 10vh;">
    <div class="bank">
        <img src="/imgs/share1.jpg" alt="">
        <p>中国银行</p>
    </div>
    <div class="bank">
        <img src="/imgs/share1.jpg" alt="">
        <p>中国建设银行</p>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style>
li{
    list-style: none;
}
.share-help1{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    height: 100%;
}
.share-help1 span{
    margin-left: 12px;
    font-size: 20px;
    font-weight: bold;
}
.share-help2 li{
    float: left;
    width: 22%;
    height: 32vh;
    margin-left: 8%;
    border: 1px solid orange;
}
.share-help2 li p{
    font-weight: bold;
    margin: 0;
    margin-bottom: 2px;
}
.share-help2-img{
    width: 100%;
    height: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: orange;
}
.share-help2-img img{
    width: 10vh;
    height: 10vh;
}
.share-help2-content{
    width: 100%;
    height: 60%;
    display: flex;
    justify-content: center;
}
.bank {
    width: 14%;
    height: 18vh;
    margin-top: 3vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-right: 8%;
}
.bank img{
    width: 6vh;
    height: 6vh;
}
.bank p{
    margin-top: 1vh;
    font-weight: bold
}
</style>